<!DOCTYPE html>
<html lang="en" ng-app>
<head>
	<script type="text/javascript" src="js/three.js"></script>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body onload="init()">
	<canvas id="mainCanvas" width="800px" height="600px"></canvas>
</body>
</html>

<script>	
	function init () {	

		var renderer = new THREE.WebGLRenderer({
		canvas: document.getElementById('mainCanvas') }); 
		renderer.setClearColor(0xcccccc); // black 
		renderer.shadowMapEnabled = true;
		// scene 
		var scene = new THREE.Scene();
		
		// camera 
		var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000); 
		camera.position.set(2, -3, 1.5); 
		camera.lookAt(new THREE.Vector3(0, 0, 0));
		
		scene.add(camera); 
		// a cube in the scene 
		var cube = new THREE.Mesh(new THREE.TorusGeometry(1, 0.3, 50, 81), new THREE.MeshLambertMaterial({
		 color: 0xff0000,
		 ambient:0xff0000,
		 //wireframe: true
		}) ); 
		
		THREE.Quaternion

		//scene.add(cube); 

		var light = new THREE.PointLight(0xffffff, 2, 100); 
		light.position.set(2, -3, 1.5); 
		scene.add(light);

		window.addEventListener("keydown", function (e) {
			 var keyID = e.keyCode ? e.keyCode :e.which;  
		    if(keyID === 38 || keyID === 87)  { // up arrow and W   
		       cube.position.y -= 0.05;  
		    }  
		    if(keyID === 39 || keyID === 68)  { // right arrow and D  
		        cube.position.x += 0.05;  
		    }  
		    if(keyID === 40 || keyID === 83)  { // down arrow and S  
		       cube.position.y += 0.05;  
		    }  
		    if(keyID === 37 || keyID === 65)  { // left arrow and A  
		       cube.position.x -= 0.05;  
		    }  
		}, true);

		Update();

		// render 
		function Update(){
			cube.rotation.x = Date.now() * 0.0005;  
            //cube.rotation.y = Date.now() * 0.001;
			scene.add(cube); 
			renderer.render(scene, camera);
			requestAnimationFrame(Update);
		}
	}

	

	var w = window;
	requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;

</script>